<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>范闲商城-商品详情</title>
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/reset.css}">
	<link rel="stylesheet" type="text/css" th:href="@{/static/css/main.css}">
	<link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
	<script th:src="@{/static/jquery-2.1.4.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/layui/layui.js}" type="text/javascript" charset="utf-8"></script>
	<script th:src="@{/static/mylayer.js}" type="text/javascript" charset="utf-8"></script>
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_2226582_dki77h4juap.css">
	<style>
		.avatar-img {
			width: 20px; /* 设置头像图片的宽度 */
			height: 20px; /* 设置头像图片的高度，可以根据需要调整 */
			border-radius: 50%; /* 使图片呈现圆形 */
			margin-right: 10px; /* 设置头像图片与用户名之间的间距，可以根据需要调整 */
		}
		.detail_tab li {
			display: inline-block;
			cursor: pointer;
		}
		.tab_content dl {
			display: none;
		}
		.tab_content dl.active {
			display: block;
		}
		.goods_detail_list {
			position: relative; /* Add relative positioning */
		}
		.heart-box {
			position: absolute;
			right: 0;
			top: 0;
			width: 86px;
			height: 62px;
		}
		i, .iconfont {
			font-size: 60px;
			color: red;
		}

		input.collect {
			position: absolute;
			left: -17px;
			top: -3px;
			width: 100%;
			height: 100%;
			border-radius: 50%;
			opacity: 0;
			z-index: 2;
		}
		input.collect:checked + .icon {
			display: none;
		}
		input.collect {
			/* 为收藏的input添加特定的样式 */
			cursor: pointer; /* 改变鼠标指针形状 */
			background-color: transparent; /* 设置背景颜色为透明 */
			outline: none; /* 移除焦点时的轮廓线 */
		}

		input.collect:checked {
			/* 当input被选中时的样式 */
			background-color: #f00; /* 选中时的背景颜色，例如红色 */
		}
		.icon {
			position: absolute;
			left: 0;
			top: 0;
		}
		.comment-item {
			border: 1px solid #ccc;
			padding: 10px;
			margin-bottom: 10px;
			background-color: #f9f9f9;
			border-radius: 5px;
		}

		.comment-item .avatar-image {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			margin-right: 10px;
			vertical-align: middle;
		}

		.comment-item p {
			display: inline-block;
			vertical-align: middle;
			margin: 0;
			color: #333;
		}

		.comment-item .comment-content {
			margin-top: 5px;
			font-size: 14px;
			color: #666;
		}

		.comment-item .comment-image {
			max-width: 100%;
			margin-top: 5px;
			width: 100px;
			height: 100px;
		}
		/*.touxiang {*/
		/*	width: 50px; !* 设置头像图片的宽度 *!*/
		/*	height: 50px; !* 设置头像图片的高度，可以根据需要调整 *!*/
		/*	border-radius: 50%; !* 使图片呈现圆形 *!*/
		/*	margin-right: 10px; !* 设置头像图片与用户名之间的间距，可以根据需要调整 *!*/
		/*}*/
	</style>
</head>
<body>

	<div th:replace="header::top"></div>

	<div class="search_bar clearfix">
		<a href="/" class="logo fl"><img src="../static/pic/fanxian-mall.png" width="150px" height="60px"></a>
		<div class="search_con fl">
			<input type="text" id="searchInput" class="input_text fl" placeholder="搜索商品">
			<input type="button" id="searchButton" class="input_btn fr" value="搜索">
		</div>
		<div class="guest_cart fr">
			<a href="/page/cart" id="cart" class="cart_name fl">我的购物车</a>
		</div>
	</div>

	<div class="navbar_con">
		<div class="navbar clearfix">
			<div class="subnav_con fl">
				<h1>全部商品分类</h1>
				<span></span>
				<ul class="subnav" id="LAY_CategoryList">
				</ul>
			</div>
			<ul class="navlist fl">
				<li><a href="/">首页</a></li>
				<li class="interval">|</li>
				<li><a href="/page/list">全部商品</a></li>
				<li class="interval">|</li>
				<li><a href="/page/turntable">抽奖</a></li>
			</ul>
		</div>
	</div>

	<div class="breadcrumb" id="categoryName">
		<a href="#">全部分类</a>
		<span>></span>
		<a href="#">新鲜水果</a>
		<span>></span>
		<a href="#">商品详情</a>
	</div>

	<div class="goods_detail_con clearfix">
		<div class="goods_detail_pic fl"><img id="mainImage" src="images/goods_detail.jpg" width="350px" height="350px"></div>

		<div class="goods_detail_list fr">
			<h3 id="name">大兴大棚草莓</h3>
			<div class="heart-box">
				<input type="checkbox" checked class="collect">
				<i id="heart-icon" class="iconfont icon-shoucangshixin1 icon"></i>
				<i class="iconfont icon-shoucang1"></i>
			</div>
			<p id="subtitle">草莓浆果柔软多汁，味美爽口，适合速冻保鲜贮藏。草莓速冻后，可以保持原有的色、香、味，既便于贮藏，又便于外销。</p>
			<div class="prize_bar">
				<span class="show_pirze">¥<em id="price">16.80</em></span>
				<span class="show_unit">单  位：500g</span>
			</div>
			<div class="goods_num clearfix">
				<div class="num_name fl">数 量：</div>
				<div class="num_add fl">
					<input type="text" class="num_show fl" id="quantity" value="1">
					<a href="javascript:;" class="add fr">+</a>
					<a href="javascript:;" class="minus fr">-</a>
				</div>
			</div>
			<div class="total">总价：<em id="totalprice">16.80</em>元</div>
			<div class="operate_btn" id="LAY_Button">
				<a href="javascript:;"><button class="buy_btn" id="buy_btn">立即购买</button></a>
				<a href="javascript:;"><button class="add_cart" id="add_cart">加入购物车</button></a>
			</div>
		</div>
	</div>

	<div class="main_wrap clearfix">
		<div class="l_wrap fl clearfix">
			<div class="new_goods">
				<h3>智能推荐</h3>
				<ul id="newProduct">
					<li>
						<a href="#"><img src="/static/images/goods/goods001.jpg"></a>
						<h4><a href="#">进口柠檬</a></h4>
						<div class="prize">￥3.90</div>
					</li>
					<li>
						<a href="#"><img src="/static/images/goods/goods002.jpg"></a>
						<h4><a href="#">玫瑰香葡萄</a></h4>
						<div class="prize">￥16.80</div>
					</li>
				</ul>
			</div>
		</div>

		<div class="r_wrap fr clearfix">
			<ul class="detail_tab clearfix">
				<li class="active" data-target="detail">商品介绍</li>
				<li data-target="comment">评论</li>
			</ul>

			<div class="tab_content">
				<dl id="detail" class="active">
					<dt>商品详情：</dt>
					<dd>草莓采摘园位于北京大兴区 庞各庄镇四各庄村 ，每年1月-6月面向北京以及周围城市提供新鲜草莓采摘和精品礼盒装草莓，草莓品种多样丰富，个大香甜。所有草莓均严格按照有机标准培育，不使用任何化肥和农药。草莓在采摘期间免洗可以直接食用。欢迎喜欢草莓的市民前来采摘，也欢迎各大单位选购精品有机草莓礼盒，有机草莓礼盒是亲朋馈赠、福利送礼的最佳选择。</dd>
				</dl>
				<dl id="comment">
					
					<div class="comment-item">
						<div class="layui-inline">
							<img src="/static/images/goods/goods001.jpg" title="头像" class="avatar-image">
						</div>
						<div class="layui-inline">
							<p id="userName1">用户名</p><br>
							<p style="font-size: 12px">2024-06-14 18:34:20</p>
						</div>
						<br>
						<div style="margin-left: 60px">
							<div id="ID-rate-demo-readonly1"></div><br>
							<em class="comment-content">评论:非常不错</em><br>
							<img class="comment-image" src="/static/images/goods/goods001.jpg" title="评论图片">
						</div>

					</div>
				</dl>

			</div>
		</div>
	</div>

	<div class="footer">
		<div class="foot_link">
			<a href="#">关于我们</a>
			<span>|</span>
			<a href="#">联系我们</a>
			<span>|</span>
			<a href="#">招聘人才</a>
			<span>|</span>
			<a href="#">友情链接</a>
		</div>
		<p>CopyRight © 2024 北京鑫鑫科技有限公司 All Rights Reserved</p>
		<p>电话：010-8888888    京ICP备88888888号</p>
	</div>
	<div class="add_jump"></div>

	<script th:inline="javascript">
		var queryString = window.location.search;
		var urlParams = new URLSearchParams(queryString);
		var productId = urlParams.get("productId");
		var parentId = urlParams.get("parentId");
		var categoryId = urlParams.get("categoryId");
		var number = parseInt($('#quantity').val()); // 初始赋值

		$(document).ready(function() {
			// 检查用户是否登录
			$.post('/user/checkUserLogin', function(result) {
				var collectInput = $('.heart-box .collect'); // 获取收藏的input元素

				if (result.code !== 0) {
					// 用户未登录
					collectInput.prop('checked', true);  // 设置为选中
					collectInput.prop('disabled', true); // 设置为不可点击
				} else {
					// 用户已登录
					collectInput.prop('disabled', false); // 可以点击

					// 可以在这里添加更多逻辑，例如根据用户的收藏状态来设置checked属性
					checkCollectStatus(); // 假设这是一个函数，用来检查并设置当前商品的收藏状态
				}
			}, 'json');
		});

		function checkCollectStatus() {
			$.post(
					'/collect/checkCollect',
					{ 'productId': productId },
					function (result) {

						if (result.data == null || result.data.length === 0) {
							// 如果数据为空，设置checked为true
							$('.heart-box .collect').prop('checked', true);
						} else {
							// 如果数据不为空，设置checked为false
							$('.heart-box .collect').prop('checked', false);
						}
					},
					'json'
			);
		};



		layui.use(function(){
			var rate = layui.rate;
			// 渲染
			rate.render({
				elem: '#ID-rate-demo-readonly',
				value: 5,
				readonly: true,
				text: true,
				setText: function(value){ // 自定义文本的初始回调
					var arrs = {
						'1': '非常不满意',
						'2': '不满意',
						'3': '一般',
						'4': '满意',
						'5': '非常满意',
					};
					this.span.text(arrs[value] || ( value + "星"));
				}
			});
			$.post(
					'/evaluate/selectByProductId',
					{ 'productId': productId },
					function (result) {
						if (result.code == 0) {
							var html = '';
							$('#comment').empty(); // 清空现有内容
							$(result.data).each(function () {
								var commentHtml = '<div class="comment-item">'
										+ '<div class="layui-inline">'
										+ '    <img src="' + (this.anonymous ? '/static/images/nmtx.jpg' : this.userImage) + '" title="头像" class="avatar-image">'
										+ '</div>'
										+ '<div class="layui-inline">'
										+ '    <p id="userName">' + (this.anonymous ? '匿名用户' : this.username) + '</p><br>'
										+ '    <p style="font-size: 12px">' + this.createTime + '</p>'
										+ '</div>'
										+ '<br>'
										+ '<div style="margin-left: 60px">'
										+ '    <div id="ID-rate-' + this.id + '"></div><br>'
										+ '    <em class="comment-content">' + this.evaluate + '</em><br>'
										+ '    <img class="comment-image" src="' + this.evaluateImage + '" title="评论图片">'
										+ '</div>'
										+ '</div>';

								// Append the HTML to the DOM
								$('#comment').append(commentHtml);

								// Render the rate component
								rate.render({
									elem: '#ID-rate-' + this.id,
									value: this.rating,
									readonly: true,
									text: true,
									setText: function(value) {
										var arrs = {
											'1': '非常不满意',
											'2': '不满意',
											'3': '一般',
											'4': '满意',
											'5': '非常满意',
										};
										this.span.text(arrs[value] || (value + "星"));
									}
								});
							});
						}
					},
					'json'
			);

			rate.render({
				elem: '#ID-rate-demo-readonly1',
				value: 4,
				readonly: true,
				text: true,
				setText: function(value){ // 自定义文本的初始回调
					var arrs = {
						'1': '非常不满意',
						'2': '不满意',
						'3': '一般',
						'4': '满意',
						'5': '非常满意',
					};
					this.span.text(arrs[value] || ( value + "星"));
				}
			});
		});
		$('#searchButton').click(function() {
			var searchText = $('#searchInput').val(); // 获取搜索框中的值
			var searchUrl = '/page/list?search=' + encodeURIComponent(searchText); // 构建带有搜索关键字的URL
			window.location.href = searchUrl; // 跳转到另一个页面
		});


		// $.post(
		// 		'/collect/checkCollect',
		// 		{ 'productId': productId },
		// 		function (result) {
		//
		// 			if (result.data == null || result.data.length === 0) {
		// 				// 如果数据为空，设置checked为true
		// 				$('.heart-box .collect').prop('checked', true);
		// 			} else {
		// 				// 如果数据不为空，设置checked为false
		// 				$('.heart-box .collect').prop('checked', false);
		// 			}
		// 		},
		// 		'json'
		// );



		document.addEventListener('DOMContentLoaded', function() {
			var heartBox = document.querySelector('.heart-box'); // 获取包含收藏input的div

			heartBox.addEventListener('click', function() {
				var collectInput = document.querySelector('.heart-box .collect'); // 获取收藏的input
				var isChecked = collectInput.checked; // 获取input的选中状态

				if (isChecked === false) {
					$.post(
							'/collect/addCollect',
							{ 'productId': productId },
							function (result) {
								if (result.code == 0) {
									mylayer.okMsg(result.msg);
								}
							},
							'json'
					);
				} else {
					$.post(
							'/collect/cancelCollect',
							{ 'productId': productId },
							function (result) {
								if (result.code == 0) {
									mylayer.okMsg(result.msg);
								}
							},
							'json'
					);
				}
				// 打印选中状态到控制台，或者根据需要进行其他操作
				console.log('收藏状态：', isChecked ? '未收藏' : '已收藏');
				console.log(isChecked);

				// 可以在这里添加其他逻辑，比如发送数据到服务器等
			});
		});


		document.querySelectorAll('.detail_tab li').forEach(tab => {
			tab.addEventListener('click', function() {
				document.querySelectorAll('.detail_tab li').forEach(t => t.classList.remove('active'));
				document.querySelectorAll('.tab_content dl').forEach(content => content.classList.remove('active'));

				this.classList.add('active');
				document.getElementById(this.getAttribute('data-target')).classList.add('active');
			});
		});
		$.post(
				'/user/checkUserLogin',
				function (result) {
					if (result.code == 0) {
						//代表已经登录
						$.post(
								'/footprint/addFootprint',
								{ 'productId': productId },
								function (result) {
									if (result.code == 0) {
										console.log(result.msg);
									}
								},
								'json'
						);
					}
				},
				'json'
		);

		$.post(
			'/product/selectByProductId',
			{ 'id': productId },
			function (result) {
				if (result.code == 0) {

					$('#name').text(result.data.name);
					$('#subtitle').text(result.data.subtitle);
					$('#price').text(result.data.price);
					$('#totalprice').text(result.data.price);
					$('#detail').html(result.data.detail);
					$('#mainImage').attr('src', result.data.mainImage);
					//updateTotalPrice(); // 调用函数更新总价

				}
			},
			'json'
		);
		$('#buy_btn').click(function () {
			$.post(
					'/user/checkUserLogin',
					function (result) {
						if (result.code == 0) {
							//代表已经登录
							$.post(
									'/product/checkStock',
									{ 'id': productId },
									function (result) {
										if (result.code == 0) {
											//代表已经登录，直接插入购物车
											//nowBuy();
											location.href='/page/place/orderNow?productId='+productId+'&quantity='+number;
										} else {
											mylayer.errorMsg(result.msg);
										}
									},
									'json'
							);
						} else {
							//没有登录
							//nowBuy();
							location.href = '/page/login?returnUri=/page/detail?productId=' + productId + '&parentId=' + parentId + '&categoryId=' + categoryId + '';
						}
					},
					'json'
			);
		});


		$('#add_cart').click(function () {
			$.post(
					'/user/checkUserLogin',
					function (result) {
						if (result.code == 0) {
							//代表已经登录
							$.post(
									'/product/checkStock',
									{ 'id': productId },
									function (result) {
										if (result.code == 0) {
											//代表已经登录，直接插入购物车
											addToCart();
										} else {
											mylayer.errorMsg(result.msg);
										}
									},
									'json'
							);
						} else {
							//没有登录
							addToCart();
						}
					},
					'json'
			);


		});
		function addToCart() {
			console.log('addToCart');

			$.ajax({
				url: '/cart/add?returnUri=/page/detail?productId='+productId+'&parentId='+parentId+'&categoryId='+categoryId+'',
				type: 'POST',
				data: {'productId': productId, 'quantity': number},
				dataType: 'json',
				success: function (result) {
					if (result.code == 0) {
						mylayer.okMsg(result.msg);
					} else {
						mylayer.errorMsg(result.msg);
					}
				},
				complete : function(xhr, status) {
					//拦截器实现超时跳转到登录页面
					// 通过xhr取得响应头
					var REDIRECT = xhr.getResponseHeader("REDIRECT");
					//如果响应头中包含 REDIRECT 则说明是拦截器返回的需要重定向的请求
					if (REDIRECT == "REDIRECT") {
						var win = window;
						while (win != win.top) {
							win = win.top;
						}
						win.location.href = xhr.getResponseHeader("CONTEXTPATH");
					}
				}
			});
		}

		$.post(
				'/category/listAll',
				function (result) {
					if (result.code == 0) {
						$('#LAY_CategoryList').empty();
						$(result.data).each(function () {
							$('#LAY_CategoryList').append('<li><a href="/page/list?parentId=' + this.id + '">'+this.name+'</a></li>');
						})
					}
				},
				'json'
		);
		$.post(
				'/category/categoryName',
				{'parentId': parentId, 'categoryId': categoryId},
				function (result) {
					if (result.code == 0) {
						var html = '';
						$('#categoryName').empty();
						html += '<a href="/page/list">全部分类</a>'
						html += '<span>></span>'
						html += '<a href="/page/list?parentId='+parentId+'">'+result.msg+'</a>'
						html += '<span>></span>'
						html += '<a href="/page/list?parentId='+parentId+'&categoryId='+categoryId+'">'+result.data+'</a>'
						$('#categoryName').append(html);

					}
				},
				'json'
		);
		function logout() {
			layer.confirm(
					'您确认要退出么',
					{icon:3},
					function() {
						$.post(
								'/user/logout',
								function (result) {
									if (result.code == 0) {
										mylayer.okMsg(result.msg);
										setTimeout(function() {
											window.location.reload();
										}, 800);
									}
								},
								'json'
						);
						// location.href = '/admin?method=logout'
					}
			);
		};
		$.post(
				'/user/checkUserLogin',
				function (result) {
					if (result.code == 0) {
						$.post(
								'/order/checkUserOrder',
								function (result) {
									if (result.data == 0) {
										//订单为0
										newProduct();
									} else {
										//智能推荐
										$.post(
												'/product/recommendedProducts',
												function (result) {
													if (result.code == 0) {
														var html = '';
														$('#newProduct').empty();
														$(result.data.slice(7, 9)).each(function () {
															html += '<li>'
															html += '	<a href="/page/detail?productId=' + this.id + '&parentId=' + this.parentId + '&categoryId=' + this.categoryId + '"><img src="' + this.mainImage + '"></a>'
															html += '	<h4><a href="/page/detail?productId=' + this.id + '&parentId=' + this.parentId + '&categoryId=' + this.categoryId + '">' + this.name + '</a></h4>'
															html += '	<div class="prize">¥ ' + this.price + '</div>'
															html += '</li>'
														});
														$('#newProduct').append(html);
													}
												},
												'json'
										);
									}
								},
								'json'
						);
					} else {
						//没有登录
						newProduct();
					}
				},
				'json'
		);

		function newProduct() {
			$.post(
					'/product/selectList',
					function (result) {
						if (result.code == 0) {
							var html = '';
							$('#newProduct').empty();
							$(result.data.slice(-2)).each(function () {
								html += '<li>'
								html += '	<a href="/page/detail?productId=' + this.id + '&parentId=' + this.parentId + '&categoryId=' + this.categoryId + '"><img src="' + this.mainImage + '"></a>'
								html += '	<h4><a href="/page/detail?productId=' + this.id + '&parentId=' + this.parentId + '&categoryId=' + this.categoryId + '">' + this.name + '</a></h4>'
								html += '	<div class="prize">¥ ' + this.price + '</div>'
								html += '</li>'
							});
							$('#newProduct').append(html);
						}
					},
					'json'
			);
		}
		$(document).ready(function() {
			// 更新总价的函数
			function updateTotalPrice() {
				var price = parseFloat($('#price').text()); // 获取单价
				number = parseInt($('.num_show').val()); // 获取当前数量，并更新number变量
				var quantity = number; // 使用number变量
				// 检查输入框是否为空
				if (isNaN(quantity) || quantity <= 0) {
					quantity = 1; // 设置默认数量为1
					number = quantity; // 更新number变量
					$('.num_show').val(quantity); // 将输入框设置为默认数量
				}
				var totalPrice = price * quantity; // 计算总价
				$('#totalprice').text(totalPrice.toFixed(2)); // 更新总价显示
			}

			// "+" 按钮点击事件
			$('.add').click(function() {
				number++; // 数量加一，并更新number变量
				$('.num_show').val(number); // 更新输入框
				updateTotalPrice(); // 更新总价
			});

			// "-" 按钮点击事件
			$('.minus').click(function() {
				if (number > 1) { // 限制最小数量为1
					number--; // 数量减一，并更新number变量
					$('.num_show').val(number); // 更新输入框
					updateTotalPrice(); // 更新总价
				}
			});

			// 输入框内容变化时更新总价
			$('.num_show').on('input', function() {
				number = parseInt($(this).val()); // 获取当前数量，并更新number变量
				updateTotalPrice();
			});

			// 初始加载时更新总价
			updateTotalPrice();
		});
	</script>
	
</body>
</html>